<!-- src/views/home/components/CentralImgCard CentralImgCard.vue 2023/5/24  @wanghaoran -->
<template>
  <whr-base-card v-bind="$attrs">
    <template #content>
      <img class="absolute-center" :src="centralImg" alt="">
      <div class="absolute-center" :class="centerStyle">
        <slot name="center"></slot>
      </div>
      <div class="flex-1 flex-row flex-row-items-between flex-col-start">
        <div class="">
          <div class="flex-col flex-col-center whr-base-card-content-default-font">
            <slot name="leftTop"></slot>
          </div>
        </div>
        <div class="">
          <div class="flex-col flex-col-center whr-base-card-content-default-font">
            <slot name="rightTop"></slot>
          </div>
        </div>
      </div>
      <div class="flex-1 flex-row flex-row-items-between flex-col-end">
        <div class="">
          <div class="flex-col flex-col-center whr-base-card-content-default-font">
            <slot name="leftBottom"></slot>
          </div>
        </div>
        <div class="">
          <div class="flex-col flex-col-center whr-base-card-content-default-font">
            <slot name="rightBottom"></slot>
          </div>
        </div>
      </div>
    </template>
  </whr-base-card>
</template>

<script>
export default {
  inheritAttrs: false
}
</script>

<script setup>
import WhrBaseCard from "../WhrBaseCard/WhrBaseCard.vue";

defineProps({
  centralImg:{
    type: String,
    default: ""
  },
  centerStyle:{
    type: String,
    default: ""
  }
})

</script>

<style scoped>
@import "../assets/css/index.css";
</style>